<template>
    <div class="grade-models-list">
        <rui-page :defines="defines">
            <rui-query ref="formDom" :label-width="120" :query="queryData" :query-rows="formOptions"></rui-query>

            <rui-table
                ref="tableDom"
                defineId="defineData"
                ref-query="formDom"
                @loadDatas="queryData"
                :columns="tableColumns"
                :slots="[{key:'index',slot:'index'},{key:'modelScore',slot:'modelScore'}]"
                :showIndex="false"
                :select="false"
                @on-current-change="onCurrentChange"
            >
                <template slot="toolBar">
                    <Button @click="showModal('add')" type="primary">新增</Button>
                    <Button @click="showModal('read')" :disabled="isBtnDisabled" type="primary">查看</Button>
                    <Button @click="showModal('change')" :disabled="isBtnDisabled" type="primary">修改</Button>
                    <Button @click="showContractDetial" :disabled="isBtnDisabled" type="primary">配置</Button>
                    <Button @click="del" :disabled="isBtnDisabled" type="primary">删除</Button>
                </template>
                <template slot="index" slot-scope="{ index }">
                   <span>{{index + 1}}</span>
                </template>
                <template slot="modelScore" slot-scope="{ row }">
                    <span>{{row['modelScore']}}</span>
                </template>
                <template slot="timeDimension" slot-scope="{ row }">
                    <span>{{row['timeDimension']}}</span>
                </template>
            </rui-table>
        </rui-page>
        <!-- <button @click="showContractDetial">配置</button> -->
        <ItemModal
            :getDataFn="getDataFn"
            :dataDict="dataDict"
            :modal="modal"
            :modalType="modalType"
            :modalTitle="modalTitle"
            :modalData="currentRow"
            @closeModal="closeModal"
        />
    </div>
</template>

<script>
import { mapGetters } from "vuex";

import defineData from "./defineData";

import { queryGradeModel, save, edit, deleteMode } from "_p/afs-channel/api/grade-model"

import { getDictDataList } from "_p/afs-channel/assets/js/utils";

import ItemModal from "_p/afs-channel/pages/grade-model/components/itemModal";

export default {
    //
    name: "GradeModelsList",
    components: {
        // ActivatedCase,
        ItemModal
    },
    data() {
        return {
            selection: [],
            resolveDisable: true,
            getDataFn: () => { },
            pageNo: 1,
            openModal: false,
            defines: [],
            loading: false,
            spinShow: false,
            isBtnDisabled: true, //能否点击删改查按钮
            currentRow: {}, //当前选中的row
            dicttArr: [
                "gradeModelType",
                "gradeModelStatus",
                "timeDimension",
                "gradeModelPurpose", // 评分模型用途(gradeModelPurpose)
            ],
            dataDict: {},
            modal: false,
            modalType: '',
            modalTitle: '',
            formOptions: [
                {
                    defineId: "defineData",
                    span: 8,
                    fields: [
                        "modelType",
                        // "modelCode",
                        // "modelName",
                        // "modelScore",
                        // "state",

                    ],
                },
            ],

            tableColumns: [
                "index",
                "modelType",
                "modelCode",
                "modelName",
                "modelScore",
                "timeDimension",
                "state",
            ],
        };
    },
    computed: {
        ...mapGetters({
            userInfo: "userInfo",
            roleType: "roles",
        }),
    },

    created() {
        this.defines.push({ id: "defineData", fields: defineData });
    },
    mounted() {
        console.group("页面初始数据：");
        console.log("userInfo:", this.userInfo);
        console.log("roleType:", this.roleType);
        console.log("contractNo:", this.contractNo);
        console.groupEnd();
    },
    activated() {
        this.init();
    },
    methods: {
        init() {
            this.getDictDataList();
            this.$refs['tableDom'].reloadData();
        },
        getDictDataList() {
            getDictDataList(this.dicttArr).then((res) => {
                console.group("数据字典:");
                console.log(this.dicttArr.join("  "));
                console.log(JSON.parse(JSON.stringify(res)));
                console.groupEnd();
                this.dataDict = res;
            });
            // 在数据字典返回后调请求
            // this.queryData(this.$refs.formDom.getFormData());
            // this.$refs['tableDom'].reloadData();
        },
        queryData(queryData) {
            if (this.loading || !queryData) return;
            this.loading = true;
            queryGradeModel(queryData)
                .then((res) => {
                    console.log(res, "queryGradeModel");
                    if (res.code === "0000" && res.data) {
                        let { records, total } = res.data;
                        if (records.length > 0) {
                            records[0]._highlight = true
                            this.currentRow = records[0];
                            this.isBtnDisabled = false
                        }
                        this.$refs.tableDom.updateTableData(records, total);

                    }
                    this.loading = false;
                })
                .catch((e) => {
                    console.error(e);
                    this.loading = false;
                });
        },
        onCurrentChange(row) {
            this.currentRow = row;
            this.isBtnDisabled = false
        },
        // 删除
        del() {
            if (!this.currentRow) return;
            this.$Modal.confirm({
                title: "确认删除？",
                onOk: () => {
                    this.loading = true;
                    if (this.currentRow && this.currentRow.id)
                        this.deleteQuery(this.currentRow.id);
                }
            });
        },
        deleteQuery(contractNo) {
            deleteMode(contractNo).then(res => {
                this.loading = false;
                if (res.code === "0000") {
                    // this.contractTable = res.data;
                    this.$Message.success(res.data);
                    this.$refs['tableDom'].reloadData();
                }
            }).catch(e => {
                console.error(e)
                this.loading = false;
            });
        },

        showContractDetial() {
            this.afs.newTab(
                this,
                "projects/afs-channel/pages/grade-model/pages/grade-model-detial/grade-model-detial",
                "评分模型配置",
                "ios-add",
                this.currentRow,
                "change-bank-card-detial-" + this.pageNo,
                [],
                true
            );
            this.pageNo += 1;
        },
        getTitle(data, val) {
            if (!val || !Array.isArray(data)) return '';
            let d = data.filter(i => i.value == val);
            if (d[0] && d[0].title) {
                return d[0].title;
            }
            return val; // 没有数据返回原值
        },

        // 弹窗
        showModal(type) {
            if (!type) return;
            let modalTitle = ''
            switch (type) {
                case "add":
                    modalTitle = '新增'
                    this.getDataFn = save
                    break;
                case "change":
                    modalTitle = '修改'
                    this.getDataFn = edit
                    break;
                case "read":
                    modalTitle = '查看'
                    break;
            }
            this.modalType = type;
            this.modalTitle = modalTitle;
            this.modal = true;
        },
        closeModal(reloadData) {
            this.modal = false;
            if (reloadData)
                this.$refs['tableDom'].reloadData();
        },
    },
};
</script>
<style lang="less">
@import "../../../../assets/css/channelBase.css";
.text-center {
    text-align: center;
    button:not(:last-child) {
        margin-right: 16px;
    }
}
</style>
